import {useState,useEffect} from 'react'
import styles from './address.module.css'
import { NavBar,SwipeCell,Flex, Button, Image, Typography,Toast   } from 'react-vant';
import {useNavigate} from 'react-router-dom'
import {api} from '../../luyou/index'
export default function Address() {
  const navigate = useNavigate()
  const [addressList,setAddressList] = useState([])
  useEffect(()=>{
    getaddress()
  },[])
  let getaddress = async ()=>{
      let {data}=await api.get('/getaddress')
      console.log(data);
      if(data.code==200){
        setAddressList(data.data)
      }
      
  }
  let deladdress = async (id)=>{
      let {data}=await api.post('/deladdress',{_id:id})
      if(data.code==200){
        getaddress()
        Toast.success('删除成功')
      }
  }
  return (
    <div>
         <NavBar
            title="我的地址"
            leftText="返回"
            rightText={<svg style={{width:'0.3rem',height:'0.3rem'}} t="1736409185836" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10828" width="200" height="200"><path d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z" p-id="10829" fill="#2c2c2c"></path></svg>}
            onClickLeft={() => navigate('/user')}
            onClickRight={() => navigate('/addmap')}
        />
        {
            addressList.map(item=>{
                return <SwipeCell key={item._id}
                rightAction={
                    <Button style={{ height: '100%' }} onClick={()=>deladdress(item._id)} square type="danger">
                    删除
                    </Button>
                }
                >
                <Flex className="demo-product-card" align="stretch">
                    <Image style={{ width: '2rem', height: '2rem'}} src="https://img1.baidu.com/it/u=2874855341,3183493043&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" className="demo-product-card__img" />
                    <Flex direction="column" justify="between" className="demo-product-card__content">
                    <div>
                        <Typography.Title level={5}>{item.name}</Typography.Title>
                        <Typography.Text type="secondary" style={{marginRighe:'0.2rem'}}>{item.phone}</Typography.Text>
                        <Typography.Text type="secondary">{item.xiangxidizhi}</Typography.Text>
                    </div>
                    <p><input type="radio" value={item.status==true} />设置为默认地址</p>
                    </Flex>
                </Flex>
                </SwipeCell>
            })
        }
        
    </div>
  )
}
